<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .box {
            display: flex;
            width:700px;
            height: 300px;
            border-left:1px solid mpink;
            border-bottom:1px solid mpink;
            margin:50px auto;
            justify-content:space-around;
            align-items: flex-end;
            text-align: center;
        }
        .box>div {
            display:flex;
            width: 5opx;
            background-color:pink;
            flex-direction: column;
            justify-content: space-between;
        }
        .box div h4 {
            margin-bottom:-35px;
            width:70px;
            margin-left: -10px;
        }
    </style>
</head>
<body>
    <script>
        let arr =[]
        for(let i = 1; i <= 4; i++){
            let num= prompt(`请输入${i}季度的数据:`)
            arr.push(num)
        }
        document.write('<div class="box">')
        for(let i =0;i < arr.length;i++){
            document.write(`
            <div style="height: ${arr[i]}px;">
                <span>${arr[i]}</span>
                <h4>第${i + 1}季度</h4>
                </div>
                `)
            }
            document,write(`</div>`)
    </script>
</body>
</html>